<template>
  <Header>
    <div class="layout-logo">
      <div class="logo-div">
        <img class="logo-img" src="~@/assets/logo.png"/>
      </div>
    </div>
    <div class="menu-list">
      <Menu
        mode="horizontal"
        theme="dark"
        class="hd-menu"
        :active-name="activeTab"
        @on-select="selectTab"
      >
        <MenuItem name="home" to="/backend" :class="activeTab === 'home'?'menu_item':''">
          <Icon type="ios-home"></Icon>
          平台首页
        </MenuItem>
        <MenuItem name="gateway" to="/gateway" :class="activeTab === 'gateway'?'menu_item':''">
          <Icon type="ios-send"></Icon>
          网关配置
        </MenuItem>
        <MenuItem name="apps" to="/apps" :class="activeTab === 'apps'?'menu_item':''">
          <Icon type="ios-keypad"></Icon>
          应用中心
        </MenuItem>
        <MenuItem name="system" to="/system" :class="activeTab === 'system'?'menu_item':''">
          <Icon type="ios-options"></Icon>
          系统设置
        </MenuItem>
      </Menu>
    </div>
    <div class="sys-option">
      <ul>
        <li>
          <Badge :count="8">
            <Icon type="ios-notifications-outline" size="26"></Icon>
          </Badge>
        </li>
        <li>
          <Icon type="md-power" size="26"/>
        </li>
      </ul>
    </div>
  </Header>
</template>

<script>
  import {mapActions, mapGetters} from 'vuex'

  export default {
    name: 'IndexHeader',
    data() {
      return {
        activeTab: ''
      }
    },
    methods: {
      ...mapActions(['setCurrentTab']),
      ...mapGetters(['getCurentTab']),
      selectTab: function (tab) {
        this.activeTab = tab
        this.$store.dispatch('setCurrentTab', {tab: tab})
      }
    },
    mounted() {
      this.activeTab = this.$store.getters.getCurentTab
    }
  }
</script>

<style scoped lang="scss">
  .ivu-layout-header {
    padding: 0;

    .layout-logo {
      height: 60px;
      width: 230px;
      float: left;
      padding: 10px;
      box-sizing: border-box;

      .logo-div {
        height: 100%;

        .logo-img {
          height: 100%;
          display: block;
          margin: 0 auto;
        }
      }
    }

    .menu-list {
      display: inline-block;

      .hd-menu {
        height: 62px;
        line-height: 62px;
      }

      .menu_item {
        background-color: #222E4A;
        border-top: 2px solid #0e8694;
        color: #0e8694;
      }
    }

    .sys-option {
      float: right;
      height: 60px;

      ul {
        list-style: none;

        li {
          display: inline-block;
        }
      }
    }
  }

</style>
